<template>
	<div id="center">
		<!-- <Echart :options="options" id="bottomLeftChart" height="370px" width="100%" v-if="options"></Echart> -->
		<div id="chinaMap" ref="mapChart" style="width:1920px;height:930px;"></div>
	</div>
</template>

<script type="text/javascript">
	import * as echarts from 'echarts'
	import shanxiJson from '@/assets/json/shanxi.json'
	import Echart from '@/components/echart'
	import { autoHover } from '@/utils/tools'
	import { getChinaJson, getProvinceJson, getCityJson, getDistrictJson } from "@/api/map";
	export default {
		name: "",
		components: { Echart },
		props:['echartData'],
		data() {
			return {
				options: '',
				tooltipAutoplayIndex: 0,
				mapData: {
					projectData: [ ],
				},
				tootipTimer: '',
				jsonName: 'shanxi',
				city: [
					{ name: '太原', pin: 'taiyuan' },
					{ name: '长治', pin: 'changzhi' },
					{ name: '大同', pin: 'datong' },
					{ name: '晋城', pin: 'jincheng' },
					{ name: '晋中', pin: 'jinzhong' },
					{ name: '临汾', pin: 'linfen' },
					{ name: '吕梁', pin: 'lvliang' },
					{ name: '朔州', pin: 'shuozhou' },
					{ name: '忻州', pin: 'xinzhou' },
					{ name: '阳泉', pin: 'yangquan' },
					{ name: '运城', pin: 'yuncheng' },
				],
				geoJson: []
			}
		},
		mounted() {
			this.mapData.projectData=this.echartData.map(v=>{
				return{
					...v,
					name:v.cityName,
					value:v.projects
				}
			})
			console.log(this.mapData.projectData)
            this.$nextTick(_=>{
				this.getJsonData() 
			})
			
		},
		methods: {
			getJsonData() {
				getProvinceJson(this.jsonName).then(res => {
					console.log(res)
					this.geoJson = res
					this.draw(res)
				})
			},
			draw(mapJson) {
				// const highLight = require("@/assets/609.png");
				// console.log(highLight)
				const highLight = require("@/assets/609.png");
				const textBg = require("@/assets/textBg.png");
				const dialog = require("@/assets/dialog.png");
				let mapChart = echarts.init(this.$refs.mapChart)
				echarts.registerMap('mapJson', mapJson)
				let options = {
					tooltip: {
						padding: 0,
						position: function (point, params) {
							if (['大同市', '阳泉市', '晋中市', '晋城市', '长治市'].includes(params.name)) {
								return 'right'
							} else {
								return 'left'
							}
						},
						backgroundColor: 'transparent',
						borderColor: 'transparent',
						formatter(params) {
							var str = `<div style = "background:url( ${require("@/assets/dialog.png")}) no-repeat center center;background-size:cover;padding:20px 10px;width:240px;height:240px">
								<div style = "fonts-size:18px;text-align:center;font-weight:600">${params.data.name}</div>
								<div style="padding-top:10px"> e镇数量：${params.data.value}个</div>
								<div style="padding-top:10px"> 主体数量：${params.data.markets}个</div>
								<div style="padding-top:10px"> 品牌数量：${params.data.brands}个</div>
								<div style="padding-top:10px"> 总产值：${params.data.output}0元</div>
								<div style="padding-top:10px"> 总投资：${params.data.invest}个</div>
								</div>`;
							// parms.marker 
							return str;
						},
						textStyle: {
							color: 'white',
							align: 'left',
							fontSize: 16
						},
					},
					geo: [{
						map: 'mapJson',
						top: '5',
						roam: false,
						zLevel:0,
						itemStyle: {
							normal: { 
								areaColor: 'rgba(0,81,210,0.6)', 
								  
								shadowBlur: 50,
								shadowColor: '#73eaeb',
								shadowOffsetX: -7,
								shadowOffsetY: -3,
							}, 
							emphasis: {
								color:'red'
							}
						},
					},{
						map: 'mapJson',
						top: '5',
						roam: false,
						zLevel:1,
						itemStyle: {
							normal: { 
								areaColor: 'rgba(0,81,210,0.6)', 
								
								shadowBlur: 4,
								shadowColor: 'rgba(255,255,255,0.9)',
								shadowOffsetX: 0,
								shadowOffsetY: -4, 
							}, 
							emphasis: {
								color:'red'
							}
						},
					},],
					series: [
						
						{
							type: 'map',
							map: 'mapJson',
							top: '5',
							zLevel:2,

							// mapType: 'shanxi',
							roam: false, //是否开启缩放平移
							label: {
								show: true,
								distance: 0,
								formatter(param) {
									return `{img|${param.dataIndex + 1}}{b|${param.data.name}${param.data.value}}`;
								},
								rich: {
									img: {
										fontSize: 18,
										color: '#fff',
										width: 36,
										height: 42,
										lineHeight: 50,
										backgroundColor: {
											image: highLight //注意路径带不带/
										},
										align: 'center',
										fontWeight: 'bolder',
									},
									b: {
										fontSize: 16,
										color: '#fff',
										backgroundColor: {
											image: textBg //注意路径带不带/
										},
										align: 'left',
										padding: [5, 0]
									},
									c: {
										fontSize: 16,
										color: '#fff000'
									}
								},
								textStyle: {
									color: '#ffffff',

								},
							},
							itemStyle: {
								borderColor: "#77f5f5",
								borderWidth:0.5,
								areaColor: 'rgba(0,81,210,0.6)', 
							},

							emphasis: {
								itemStyle:{   
								    areaColor: 'rgba(0,81,210,0.6)',   
								    borderColor: "#77f5f5",
									borderWidth:'3'
								}
							},

							data: this.mapData.projectData,
							groundPlane: {
								show: false
							}
						}, 

					]

				};
				mapChart.setOption(options);
				this.tootipTimer && this.tootipTimer.clearLoop(); // this.tootipTimer 在data里定义
				this.tootipTimer = 0;
				this.tootipTimer = autoHover(mapChart, options, 11, 3000);
				mapChart.on('click', function (params) {
					console.log(params)
					let city = this.mapData.find(item => item.value == params.name);
					// this.jsonName=city.pin

					//params.name 结果是“重庆=chongqing” 

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #chinaMap{
		background: url('../../assets/shanxiMap.png') no-repeat center 4.5%;
		background-size:20% ;
	} */
	#center {
		width: 1920px;
		margin: 0 auto;
	}

	br {
		height: 0;
		/* background: rgb(111, 212, 252); */
	}
</style>